<script setup>
import { computed, onMounted, ref, watch } from "vue";

const props = defineProps({
  value: [String, Number],
  loading: Boolean,
  dialogTitle: {
    type: String,
    default: "请选择"
  },
  options: Array,
  disabled: Boolean,
  inputStyle: String
});
const emits = defineEmits([
  "update:value",
  "update:loading",
  "change",
  "click",
  "selected",
  "open",
  "close"
]);

const value = computed({
  get: () => props.value,
  set: (val) => emits("update:value", val)
});

const scrollBarRef = ref(null);
const dialogRef = ref(null);

const visible = ref(false);
const display = ref(props.dialogTitle);

const selectBoxHeight = ref(0);

onMounted(() => {
  selectBoxHeight.value = window.innerHeight - 54 - 60;
  addEventListener("resize", () => (selectBoxHeight.value = window.innerHeight - 54 - 60));
});

const mouseFlag = ref(false);
const mouseOffsetX = ref(0);
const mouseOffsetY = ref(0);

function mouseDownHandler(e) {
  mouseOffsetX.value = e.clientX;
  mouseOffsetY.value = e.clientY;
  mouseFlag.value = true;
}

function mouseUpHandler() {
  mouseFlag.value = false;
}

function mouseMoveHandler(e) {
  const scrollLeft = scrollBarRef.value.wrapRef.scrollLeft;
  const scrollTop = scrollBarRef.value.wrapRef.scrollTop;
  if (mouseFlag.value) {
    scrollBarRef.value.setScrollLeft(
      scrollLeft + mouseOffsetX.value - (mouseOffsetX.value = e.clientX)
    );
    scrollBarRef.value.setScrollTop(
      scrollTop + mouseOffsetY.value - (mouseOffsetY.value = e.clientY)
    );
  }
}

function setSelection(option) {
  // display.value = option.label;
  value.value = option.value;
  visible.value = false;
  emits("selected", option);
}

function inputClick() {
  if (props.disabled) return;
  visible.value = true;
  emits("open");
  emits("click");
}

watch(visible, (val) => {
  if (val === false) {
    emits("close");
  }
});

// watch(
//   () => props.options,
//   (options) => {
//     if (options.length && options.length > 0) {
//       for (let i = 0; i < options.length; i++) {
//         if (options[i].value === value.value) {
//           display.value = options[i].label;
//           value.value = options[i].value;
//           return;
//         }
//       }
//       display.value = options[0].label;
//       value.value = options[0].value;
//     } else {
//       value.value = undefined;
//       display.value = props.dialogTitle;
//     }
//   }
// );

watch(
  value,
  (val, oldVal) => {
    if (val !== undefined && val !== null) {
      for (let i = 0; i < props.options.length; i++) {
        if (props.options[i].value === val) {
          emits("change", props.options[i], { label: display.value, value: oldVal });
          display.value = props.options[i].label;
          return;
        }
      }
    }
    display.value = props.dialogTitle;
    // emits("change", undefined);
  },
  { immediate: true }
);

watch(
  () => props.dialogTitle,
  (val) => {
    if (value.value !== undefined && value.value !== null) display.value = val;
  }
);
</script>

<template>
  <el-input
    v-model="display"
    :input-style="props.inputStyle"
    readonly
    :disabled="props.disabled"
    @click="inputClick"
  />
  <div v-loading="props.loading">
    <el-dialog
      ref="dialogRef"
      v-model="visible"
      fullscreen
      append-to-body
      :title="props.dialogTitle"
    >
      <el-empty v-if="!props.options.length || props.options.length === 0" description="查无数据">
        <el-button class="btn-out" type="primary" @click="visible = false">返 回</el-button>
      </el-empty>
      <el-scrollbar
        v-else
        ref="scrollBarRef"
        class="select-box"
        :height="selectBoxHeight + 'px'"
        @mousedown="mouseDownHandler"
        @mouseup="mouseUpHandler"
        @mousemove="mouseMoveHandler"
        @mouseleave="mouseUpHandler"
      >
        <el-space class="select-space" direction="vertical">
          <el-button
            v-for="option in props.options"
            :key="option.value"
            class="select-btn"
            @click="setSelection(option)"
            >{{ option.label }}</el-button
          >
        </el-space>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.select-box {
  .select-space {
    width: 100%;
  }
}
.select-btn {
  width: 100%;
  height: 56px !important;
}
:deep(.el-space__item) {
  width: 100%;
}
:deep(.el-dialog__body) {
  height: 100% !important;
}
.btn-out {
  height: 48px;
  width: 128px;
}
</style>
